<template>
  <div>
    <!-- 父亲组件使用子组件 -->
    <FileMagener>
      <template #header>
        <!-- {{ $t('basic.page.add') }} -->
        <div class="header">
          <el-button type="danger" color="#0960bd" :icon="Upload" @click="openUpdate">{{
            $t('basic.page.uploading')
          }}</el-button>
          <el-button type="danger" :icon="Delete" @click="deleteImage">{{
            $t('basic.page.delete')
          }}</el-button>
          <el-button type="success" :icon="Picture" @click="select_pic_data">选择</el-button>
        </div>
      </template>
      <template #main>
        <div class="main">
          <div :class="leftStyle"
            ><Left
              v-if="leftStyle == 'left_active'"
              style="width: 100%; height: 70vh; overflow-y: scroll"
              :image_type_list="image_type_list"
              @onReturn="onReturn"
            />
            <div @click="change" class="main_icon">
              <el-icon color="#0960bd"><ArrowRightBold /></el-icon>
            </div>
          </div>
          <div style="width: 100%">
            <div class="rightStyle" style="height: 70vh; overflow-y: scroll">
              <div
                v-for="(item, index) in GetImageList"
                :key="index"
                :class="item.Class"
                @click="select_pic(item, index)"
              >
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 160px;
                    height: 160px;
                  "
                >
                  <img class="image" :src="item.url"
                /></div>
              </div>
            </div>
            <div style="display: flex; align-items: center; justify-content: center; padding: 10px">
              <el-pagination
                :default-page-size="ImageForm.pageNum"
                background
                layout="prev, pager, next,total"
                :total="total"
                @current-change="currentChange"
              />
            </div>
          </div>
        </div>
      </template>
      <!-- <template #footer> 我是底部 </template> -->
    </FileMagener>
    <el-dialog
      v-model="dialogVisible"
      title="文件上传"
      width="800"
      draggable
      :show-close="false"
      modal
    >
      <div class="dialog_body">
        <div style="position: relative; padding: 10px"> 上传图片 </div>
        <el-upload
          v-model:file-list="fileList"
          multiple
          action="http://192.168.203.1:8090/basic-api/uploading"
          :headers="headers"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          name="file"
          :data="file_data"
          :on-success="uploadingSuccess"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible1">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <!-- <div style="position: relative; padding: 10px"> 文件分组 </div>
          <div style="z-index: 99999999999999999">
            <a-select
              style="z-index: inherit; width: 200px"
              mode="tags"
              v-model="typeName"
              show-search
              allowClear
              placeholder="请选择商品分类"
              :options="options1"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleChange"
            />
          </div> -->
          <el-button @click="dialogVisible = false">{{ $t('basic.page.close') }}</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            {{ $t('basic.page.confirm') }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import FileMagener from './components/index.vue';
  import Left from './components/left.vue';
  import { ref, onMounted } from 'vue';
  import { ArrowRightBold, Upload, Plus, Delete, Picture } from '@element-plus/icons-vue';
  import { ElButton } from 'element-plus';
  import { adminStore } from '/@/store/locality/admin';
  import { domain } from '/@/store/basic';
  import { message } from 'ant-design-vue';

  const ADStore: any = adminStore();
  // const typeName = ref('');

  // const filterOption = (input: string, option: any) => {
  //   return option1.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  // };

  // const options1: any = ref([
  //   { value: '1', label: '面膜' },
  //   { value: '2', label: '零食' },
  //   { value: '3', label: '阿里巴巴' },
  // ]);
  // const handleFocus = () => {
  //   console.log('focus');
  // };
  // const handleBlur = () => {
  //   console.log('blur');
  // };
  // const handleChange = (value: any) => {
  //   console.log(`selected ${value}`);
  // };
  let $emit = defineEmits(['upload']);
  function select_pic_data() {
    var data: any = [];
    GetImageList.value.forEach((item) => {
      if (item.Class == 'box_active') {
        data.push({
          url: item.url,
        });
      }
    });
    $emit('upload', 'image', data);
  }

  function select_pic(item, index) {
    if (item.Class == 'box') item.Class = 'box_active';
    else item.Class = 'box';
  }

  function currentChange(item) {
    console.log(item);
    ImageForm.value.pageNum = item;
    getImage();
  }

  const getImage_index = ref(0);

  function uploadingSuccess(item) {
    if (item.code == 200) {
      getImage();
      fileList.value = [];
      message.success(item.message);
      dialogVisible.value = false;
    } else message.error(item.message);
  }

  const file_data = ref({
    file_manage_type: 0,
  });

  const image_type_list: any = ref([]);

  function onReturn(code, item) {
    if (code == 'add') {
      getList();
    } else if (code == 'image') {
      getImage_index.value = item.id;
      file_data.value.file_manage_type = item.id;

      setTimeout(() => {
        getImage();
      }, 200);
    } else {
      file_data.value.file_manage_type = item.id;
    }
  }
  const total = ref(0);
  async function getList() {
    image_type_list.value = [
      {
        id: 0,
        name: '全部',
        Class: 'left_all_active',
      },
    ];
    const res = await ADStore.filemanage_group_list({});

    if (res.code == 200) {
      image_type_list.value = image_type_list.value.concat(res.data);
      image_type_list.value.filter((item, index) => {
        if (index == 0) index;
        else item['Class'] = 'left_all';
      });
    }
  }

  const GetImageList: any = ref([]);

  const ImageForm = ref({
    pageNum: 1,
    pageSize: 30,
  });

  async function getImage() {
    GetImageList.value = [];
    const res = await ADStore.getImage({
      file_manage_id: getImage_index.value,
      pageNum: ImageForm.value.pageNum,
      pageSize: ImageForm.value.pageSize,
    });

    if (res.code == 200) {
      total.value = 30 % res.tol_data;
      res.data.forEach((item) => {
        GetImageList.value.push({
          id: item.id,
          url: domain + item.url,
          Class: 'box',
        });
      });
    }
  }

  onMounted(() => {
    getList();
    getImage();
  });

  {
    FileMagener;
    Left;
  }
  const dialogVisible = ref(false);
  const leftStyle = ref('left_active');
  function change() {
    if (leftStyle.value == 'left_close') {
      leftStyle.value = 'left_active';
    } else {
      leftStyle.value = 'left_close';
    }
  }
  function openUpdate() {
    dialogVisible.value = !dialogVisible.value;
  }

  const headers = ref({
    Authorization: localStorage.getItem('token'),
  });

  const fileList: any = ref([]);
  const dialogImageUrl = ref('');

  const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles);
  };

  const dialogVisible1 = ref(false);

  async function deleteImage() {
    var str = '';

    GetImageList.value.forEach((item) => {
      if (item.Class == 'box_active') {
        if (str == '') str += item.id;
        else str += ',' + item.id;
      }
    });

    ImageDel(str);
  }
  async function ImageDel(str) {
    if (str == '') {
      message.info('请选中图片!');
      return;
    }
    const res = await ADStore.ImageDel({ ids: str });

    console.log(res);
    if (res.code == 200) {
      message.success(res.message);
      getImage();
    }
  }

  const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!;
    dialogVisible1.value = true;
  };
</script>
<style scoped>
  .example {
    margin: 20px 0;
    margin-bottom: 20px;
    padding: 30px 50px;
    border-radius: 4px;
    background: rgb(0 0 0 / 5%);
    text-align: center;
  }

  @keyframes fadenum1 {
    0% {
      width: 11%;
      opacity: 1;
    }

    20% {
      width: 9%;
    }

    40% {
      width: 7%;
    }

    60% {
      width: 5%;
    }

    80% {
      width: 3%;
    }

    100% {
      width: 1%;
    }
  }

  @keyframes fadenum {
    0% {
      width: 1%;
      opacity: 0.1;
    }

    20% {
      width: 3%;
      opacity: 0.3;
    }

    40% {
      width: 5%;
      opacity: 0.5;
    }

    60% {
      width: 7%;
      opacity: 0.7;
    }

    80% {
      width: 9%;
      opacity: 0.9;
    }

    100% {
      width: 11%;
      opacity: 1;
    }
  }

  .header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    padding: 5px;
    border-bottom: 5px solid #f1f1f1;
    background: #fff;
  }

  .main {
    display: flex;
  }

  .left_close {
    display: flex;
    position: relative;
    width: 1%;
    height: 70vh;
    animation: fadenum1 0.5s 1;
    background-color: #fff;
  }

  .left_active {
    display: flex;
    position: relative;
    width: 170px;
    height: 70vh;
    padding: 5px;
    animation: fadenum 0.5s 1;
    background-color: #fff;
  }

  .main_icon {
    position: absolute;
    top: 42%;
    left: 98%;
    font-size: 30px;
    font-weight: 700;
  }

  .dialog_body {
    height: 300px;
    overflow-y: scroll;
  }

  .rightStyle {
    display: grid;
    grid-auto-rows: 160px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 10%));
    padding: 10px 25px;
    gap: 10px;
  }

  .box {
    width: 160px;
    animation: fadenum3 1s 1;

    /* border: 1px solid red; */
    border-radius: 16px;
    background-color: white;
  }

  .box_active {
    width: 165px;
    height: 165px;
    overflow-y: hidden;
    border: 1px solid #315984;
  }

  .box:hover {
    width: 165px;
    height: 165px;
    overflow-y: hidden;
    border: 1px solid #315984;
  }

  @keyframes fadenum3 {
    0% {
      opacity: 0.1;
    }

    20% {
      opacity: 0.3;
    }

    40% {
      opacity: 0.5;
    }

    60% {
      opacity: 0.7;
    }

    80% {
      opacity: 0.9;
    }

    100% {
      opacity: 1;
    }
  }

  .image {
    width: 100%;
    height: 100%;
    animation: fadenum2 1s 1;
    border-radius: 8px;
    object-fit: contain;
  }

  @keyframes fadenum2 {
    0% {
      width: 0%;
      height: 0%;
      opacity: 0.1;
    }

    20% {
      width: 30%;
      height: 30%;
      opacity: 0.3;
    }

    40% {
      width: 50%;
      height: 50%;
      opacity: 0.5;
    }

    60% {
      width: 70%;
      height: 70%;
      opacity: 0.7;
    }

    80% {
      width: 90%;
      height: 90%;
      opacity: 0.9;
    }

    100% {
      width: 100%;
      height: 100%;
      opacity: 1;
    }
  }
</style>
